//引入样式
require('../../assets/css/normalize.css')
require('../../assets/css/reset.css')
require('../../assets/fonts/iconfont.css');
require('../../assets/css/tabbar.less');
require('./index.less');

//引入swiper
require('../../libs/swiper/swiper-bundle.css');
const Swiper = require('../../libs/swiper/swiper-bundle.js');

//引入模块
const dom = require('../../utils/dom.js');
const axios = require('../../utils/axios.js');

document.addEventListener('DOMContentLoaded', function () {
    //渲染tabbar
    dom.tabbar('index');

    //初始化swiper
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项
        autoplay: { //自动播放
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: false, //用户交互后不禁用自动播放
        },

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    });

    //发请求获取用户个人信息
    axios.get('/api/user/info').then(res => {
        let data = res.data.data;
        //渲染排名
        dom.get('#rankNum').textContent = data.ranking;
        //渲染徽章
        dom.get('#badgeNum').textContent = data.badges;
    });

    //发请求获取打卡信息
    function renderClock() {
        axios.get('/api/user/clockInInfo').then(res => {
            //渲染打卡天数
            dom.get('#clockNum').textContent = res.data.data.clockCount;

            let btn = dom.get('#clockBtn');
            if (res.data.data.isClockIn) {
                //已打卡
                btn.disabled = true; //禁用
                btn.style.backgroundColor = '#999';
                btn.textContent = '已打卡';
            }
        });
    }
    renderClock();

    //绑定打卡的事件
    dom.get('#clockBtn').addEventListener('click', function () {
        //发请求打卡
        axios.post('/api/user/clockIn').then(res => {
            if (res.data.errno === 0) {
                alert('打卡成功，明天再来');
                renderClock();
            }
        });
    });
});